<template>
	<view>
		
		<view class="address_auto">
		<view class="list_box">
		  <view class="title">收货人</view>
		  <input class="text" placeholder="请填写姓名" v-model="consigner"></input>
		</view>
		<view class="list_box">
		  <view class="title">联系电话</view>
		  <input class="text" placeholder="请填写联系电话" v-model="phone"></input>
		</view>
		<view class="list_box">
		    <view class="title">配送地址</view>
			<view class="address_box">
				<picker class="address" @change="provinceChange" :value="p_index" :range="p_array" range-key="region_name">
					<input class="address_input" disabled placeholder="省" :value="n_province"></input>
				</picker>
				<picker class="address" @change="cityChange" :value="c_index" :range="c_array" range-key="region_name">
					<input class="address_input" disabled placeholder="市" :value="n_city"></input>
				</picker>
				<picker  class="address" @change="districtChange" :value="d_index" :range="d_array" range-key="region_name">
					<input class="address_input" disabled placeholder="区" :value="n_district"></input>
				</picker>
			</view>
		    
		</view>
		  <textarea value="" placeholder="请填写详细地址(街道、楼牌号等)" v-model="detail"/>
		</view>

		
		
		<button class="confirm"  @tap="go()">添加</button>
		
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#333"></simple-address>
		
	</view>
</template>

<script>

	export default {
	data() {
		return {
			consigner:'',
			phone:'',
			detail:'',
			position:'',
			slecolor:0,
			slecolor02:0,
			city:'',
			province:'',
			district:'',
			f:1,
			id:'',
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '',
			
			n_province:'',
			p_array:[],
			p_index:'',
			p_id:'',   //最后的省id
			
			n_city:'',
			c_array:[],
			c_index:'',
			c_id:'',    //最后的市id
			
			n_district:'',
			d_array:[],
			d_index:'',
			d_id:'',   //最后的区id
			
			fid:'1',
			
		};
	},
	onLoad(e){
			let me = this;
			if(e.id)me.id=e.id
		
			
			if(e.id)
			{
				me.Net._get('addressData',{id:e.id},(res)=>{
					if(res.code ==1){
						me.consigner=res.data.consigner
						me.city=res.data.city
						me.phone=res.data.phone
						me.detail=res.data.detail
						me.f=res.data.isdef
						me.n_province=res.data.p.region_name
						me.p_id=res.data.p.region_code
						me.n_city=res.data.c.region_name
						me.c_id=res.data.c.region_code
						me.n_district=res.data.d.region_name
						me.d_id=res.data.d.region_code
						me.arrayValueFun('c',res.data.p.id)
						me.arrayValueFun('d',res.data.c.id)
					    //console.log(res.data)
					}
				});	
			}
			this.arrayValueFun('p');
		},
	methods: {
		arrayValueFun(type,fid=false){ //p 省   c市   d区
			let that = this;
			if(!fid)fid=this.fid;
			this.Net._get('area',{fid:fid},(res)=>{
				if(res.code ==1){
				  console.log(res.data)
				  that[type+'_array'] = res.data;
				}
			});	
		},
		provinceChange(e){
			let _i = e.detail.value;
			this.p_index = _i;
			this.p_id = this.p_array[_i].region_code;
			this.fid = this.p_array[_i].id;
			this.n_province = this.p_array[_i].region_name;
			//清空一下市  区
			this.n_city='';
			this.c_array=[];
			this.c_index='';
			this.c_id='';
			
			this.n_district='';
			this.d_array=[];
			this.d_index='';
			this.d_id='';
			//取市级的数据
			this.arrayValueFun('c')
		},
		cityChange(e){
			let _i = e.detail.value;
			this.c_index = _i;
			this.c_id = this.c_array[_i].region_code;
			this.fid = this.c_array[_i].id;
			this.n_city = this.c_array[_i].region_name;
			
			////清空  区
			this.n_district='';
			this.d_array=[];
			this.d_index='';
			this.d_id='';
			
			//取区级的数据
			this.arrayValueFun('d')
		},
		districtChange(e){
			let _i = e.detail.value;
			this.d_index = _i;
			this.d_id = this.d_array[_i].region_code;
			this.fid = this.d_array[_i].id;
			this.n_district = this.d_array[_i].region_name;
		},
		// chooseAddress(){
		//     let me = this
		//     wx.chooseAddress({ //首次调用
		//     //同意授权
		//       success:res=>{
		//         console.log(res)//地址列表信息
		// 		me.consigner=res.userName
		// 		me.city=res.provinceName+'-'+res.cityName+'-'+res.countyName
		// 		me.phone=res.telNumber
		// 		me.detail=res.detailInfo
		//       },fail:err=>{
		//         wx.getSetting({
		//           success: res => {
		//             if (res.authSetting['scope.address'] == false) {
		//               wx.showModal({
		//               //弹出框
		//                 title: '申请获取你的通讯地址？', 
		//                 content: '',
		//                 confirmColor:'#48A63E',
		//                 cancelText:'拒绝',
		//                 confirmText:'允许',
		//                 success:res=>{
		//                   if (res.cancel){
		//                   //再次拒绝
		//                   }else{
		//                     wx.openSetting({
		//                       success: res => {
		//                         wx.chooseAddress({
		//                           success: res => {
		//                             //opensetting后同意
		//                             console.log(res.userName)
		// 							me.consigner=res.userName
		// 							me.city=res.provinceName+'-'+res.cityName+'-'+res.countyName
		// 							me.phone=res.telNumber
		// 							me.detail=res.detailInfo
		//                           }, fail: err => {
		//                             console.log(err)
		//                           }
		//                         })
		//                       }, fail: err => {
		//                         wx.showToast({
		//                           title: '取消收货地址授权',
		//                           icon: 'none'
		//                         })
		//                       }
		//                     })
		//                   }
		                  
		//                 },fail:err=>{
		
		//                 }
		//               })
		              
		//             }
		//           }, fail: err => {
		//             console.log(err)
		//           }
		//         })
		//       }
		//     })
		//   },

		go() {
		
			var that = this;	
		
			if(!that.consigner || !that.phone || !that.detail || !that.n_province || !that.n_city )
			{
				that.Msg.Fail('请输入完整信息');
				return
			}
		
				console.log(that.data)
				that.city=that.n_province+'-'+that.n_city+'-'+that.n_district+'-'
				that.Net._get('upAddress',{id:that.id,consigner:that.consigner,phone:that.phone,detail:that.detail,city:that.city,pid:that.p_id,cid:that.c_id,did:that.d_id},(res)=>{
					if(res.code ==1){
						that.Msg.Success('提交成功',(res)=>{
						uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
						})
					}
				});
		},
		openAddres() {
			this.cityPickerValueDefault = [0, 0, 1]
			this.$refs.simpleAddress.open();
		},
		
		onConfirm(e) {
			this.pickerText = JSON.stringify(e.label);
			this.city=this.pickerText
			console.log(this.pickerText);
		},
		
	}
};
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
	
	.address_auto{
		width: 90%;
		margin: 4% auto;
		box-sizing: border-box;
		border-radius: 3vw;
	}
	.list_box{
	  width: 100%;
	  height: 60px;
	  background-color: #fff;
	  position: relative;
	  margin-bottom: 1px;
	}
	
	.list_box:nth-child(1){
	  margin-top: 10px;
	}
	
	.list_box .title{
	  font-size: 14px;
	  color: #333;
	  line-height: 60px;
	  position: absolute;
	  left: 26px;
	}
		
	
	.list_box .text{
	  height: 60px;
	  line-height: 60px;
	  font-size: 14px;
	  color: #666;
	  text-align: right;
	  position: absolute;
	  right: 26px;
	  width: 60%;
	}
	
	.address_box{
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		color: #666;
		position: absolute;
		right: 26px;
		width: 60%;
		display: flex;
		justify-content: space-between;
	}
	.address_box .address{
		width: 30%;
		height: 35px;
		margin-top: 12px;
	}
	.address_input{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		background: #f9f9f9;
	}
	
	
	textarea{
	  width: 100%;
	  height: 100px;
	  padding: 10px;
	  font-size: 12px;
	  color: #333;
	  background-color: #fff;
	  text-indent: 16px;
		border-radius: 0 0 3vw 3vw;
	}
	
	
	.confirm03{
		width: 92%;
		height: 12vw;
		border-radius: 12vw;
		line-height: 12vw;
		text-align: center;
		border: 1px solid #4d726f;
		color: #4d726f;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 15vw;
		box-sizing: border-box;
	}
</style>
